<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial 2 - Behaviors</title>

    <script type="text/javascript" src="sh/shCore.js"></script>
    <script type="text/javascript" src="sh/shBrushJScript.js"></script>
    <link href="sh/shCore.css" rel="stylesheet" type="text/css" />
    <link href="sh/shThemeDefault.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../../build/caat.js"></script>

    <script type="text/javascript">
         SyntaxHighlighter.all()
    </script>

    <style>
        div.code {
           font-size: .7em;
        }
    </style>


</head>


<body style="color:black; background:#ffffff;">

<h1>Behaviors</h1>

<div class="section">
<h2>Getting Started</h2>
<p>
Behaviors are modifiers for common CAAT.Actor properties.
<p>Concretely there are already out-of-the-box Behaviors to manage:
<ol>
<li>Rotations
<li>Translations across complex Paths
<li>Scales
<li>Alpha transparency
<li>Compositions of all the other types</li>
</ol>
<p><small><strong>Note: the syntax of Behavior classes it kept as is to maintain consistent class definition across different CAAT library instances.</strong></small></p>
<p>Behaviors apply to every kind of CAAT.Actor, including Scenes. Let's add some AlphaBehavior to our previous circle example:

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
<script>
    var director_1 = new CAAT.Director().initialize(
            100,80,document.getElementById('_c1'));
    var scene_1=     new CAAT.Scene().create();
    var rectangle_1= new CAAT.ShapeActor().
            create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation(10,10).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');

    scene_1.addChild(rectangle_1);
    director_1.addScene(scene_1);

    // setup a behaviour. take 5 seconds to change alpha transparency
    // from 1 to .1 start fading when 2 seconds have passed from
    // scene start time.
    var alpha_1= new CAAT.AlphaBehavior();
    alpha_1.startAlpha= 1;
    alpha_1.endAlpha= .1;
    alpha_1.setFrameTime( 2000, 5000 );

    rectangle_1.addBehavior(alpha_1);

    // set animation to 10fps.
    director_1.loop(10);
</script>
</pre>
</div>

<p>
    In the example, we're setting a Behavior to manage alpha transparency. During a 5000ms. lapse, the
    rectangle's alpha will change linearly from 1 to .1, that's it, from total opcaity to almost total transparency.
    The first value of 2000 is to set up the Behavior start time. The Behavior will start applying when
    the Scene time is greater or equal to 2000ms. The alpha transparency fading period will last for 5000ms. or 5 seconds.
</p>
<div><canvas id="_c1"></canvas></div>
<script>
    var director_1 = new CAAT.Director().initialize(
            100,80,document.getElementById('_c1'));
    var scene_1=     new CAAT.Scene().create();
    var rectangle_1= new CAAT.ShapeActor().
            create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation(10,10).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');

    scene_1.addChild(rectangle_1);
    director_1.addScene(scene_1);

    // setup a behaviour. take 5 seconds to change alpha transparency
    // from 1 to .1 start fading when 2 seconds have passed from
    // scene start time.
    var alpha_1= new CAAT.AlphaBehavior();
    alpha_1.startAlpha= 1;
    alpha_1.endAlpha= .1;
    alpha_1.setFrameTime( 2000, 5000 );

    rectangle_1.addBehavior(alpha_1);

    // set animation to 10fps.
    director_1.loop(10);
</script>
<p>As we can see in the example, the Behavior expires, and finishes applying. We can set a cyclic Behavior by
issuing

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
    alpha.setCycle(true);
</pre>
</div>

<p> This way, the Behavior will be cyclic, so that it will apply forever.
<div><canvas id='_c2'></canvas></div>
<script>
    var director_2 = new CAAT.Director().initialize(
            150,80,document.getElementById('_c2'));
    var scene_2=     new CAAT.Scene().create();

    var rectangle_2=   new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation(10,10).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');
    var rectangle_3=   new CAAT.ShapeActor().create().initialize( {
        shape:          CAAT.ShapeActor.prototype.SHAPE_RECTANGLE,
        x:              80,
        y:              10,
        width:          60,
        height:         60,
        fillStyle:      '#00ff00',
        strokeStyle:    '#000000'} );

    scene_2.addChild(rectangle_2);
    scene_2.addChild(rectangle_3);

    director_2.addScene(scene_2);

    var alpha_2= new CAAT.AlphaBehavior();
    alpha_2.startAlpha= 1;
    alpha_2.endAlpha= 0;
    alpha_2.setCycle(true);
    alpha_2.setFrameTime( 2000, 5000 );
        rectangle_2.addBehavior(alpha_2);

    var alpha_3= new CAAT.AlphaBehavior();
    alpha_3.startAlpha= 1;
    alpha_3.endAlpha= 0;
    alpha_3.setPingPong();
    alpha_3.setCycle(true);
    alpha_3.setFrameTime( 2000, 5000 );
        rectangle_3.addBehavior(alpha_3);

    director_2.loop(10);
</script>
<p>The green rectangle performs the Behavior in a slightly different way, that said, it goes from total opacity to total transparency, and then back to total opacity
in opposition to the red rectangle which abruptly goes from total transparency to total opacity.
This Behavior is modified by calling the method:
<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
alpha.setPingPong();
</pre>
</div>
<p>In fact, this method sets up a different kind of CAAT.Interpolator for the Behavior to get values from. More on CAAT.Interpolator
in succesive chapters, but as an introduction, an CAAT.Interpolator is a function or CAAT.Path that will instrument the Behavior
how it will be applied. The red rectangle is using default linear interpolator and the green one, the default PingPong'ed interpolator.
Their representation would be the following:</p>
<div><canvas id="_c3"></canvas></div>
<script>
    var director_3 = new CAAT.Director().initialize(
            150,80,document.getElementById('_c3'));
    var scene_3=     new CAAT.Scene().create();

    var _c3_ia_0= new CAAT.InterpolatorActor();
    _c3_ia_0.create();
    _c3_ia_0.setInterpolator(
            new CAAT.Interpolator().createLinearInterpolator(false) );
    _c3_ia_0.setBounds( 10, 10, 60, 60 );
    _c3_ia_0.fillStyle= '#c0c0c0';
    scene_3.addChild(_c3_ia_0);

    var _c3_ia_1= new CAAT.InterpolatorActor();
    _c3_ia_1.create();
    _c3_ia_1.setInterpolator(
            new CAAT.Interpolator().createLinearInterpolator(true) );
    _c3_ia_1.setBounds( 80, 10, 60, 60 );
    _c3_ia_1.fillStyle= '#c0c0c0';
    scene_3.addChild(_c3_ia_1);

    director_3.addScene(scene_3);

    director_3.loop(10);
</script>
</div>

<div class="section">
<h2>Lifecycle</h2>
<p>A Behavior has a very simple lifecycle. It the Behavior is not cycling, the developer has the option of being notified on Behavior
expiration by adding a listener to the Behavior. This is a simple triggering mechanism by which you will get informed of which Behavior
has expired, and at exactly what time. Upon Behavior expiration, the managed Behavior properties will be set for the final set values.
That is, in first example, Actor's alpha transparency value is guaranteed to be .1 on Behavior expiration regardless the CPU power and
needed processing time of the animation frame. In order to set the Behavior listener, we must call

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
    behavior.addListener( listener );
</pre>
</div>
the 'listener' parameter is expected to be a function of the form:

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
    behaviorExpired( behavior,time,actor )</pre>
</div>
The function parameters are:
<ol>
    <li>The CAAT.Behavior object that just expired.</li>
    <li>The CAAT.Scene object time the CAAT.Behavior just expired at.</li>
    <li>The CAAT.Actor the CAAT.Behavior was acting upon.</li>
</ol>
<p>In this example, we are switching the Behavior of an actor upon expiration or any of the applied Behaviors:</p>

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
<script>
    var director_4 = new CAAT.Director().initialize(
            160,160,document.getElementById('_c4'));
    var scene_4=     new CAAT.Scene().create();

    var _c4_rectangle_0= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation(50,50).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');
	scene_4.addChild(_c4_rectangle_0);

    var _sb_c4_text_0= new CAAT.ScaleBehavior();
    _sb_c4_text_0.setPingPong();
    _sb_c4_text_0.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
    _sb_c4_text_0.startScaleX= 1;
    _sb_c4_text_0.endScaleX= 2;
    _sb_c4_text_0.startScaleY= 1;
    _sb_c4_text_0.endScaleY= 2;
    // scale Behavior enabled by default. Start at time=2000ms, and
    // last for 3000ms.
    _sb_c4_text_0.setFrameTime(2000,3000);

    // unless otherwise stated, Behaviors are expired by default,
    // so this actor won't rotate until instrumented to do so.
    var _rb_c4_text_0= new CAAT.RotateBehavior();
    _rb_c4_text_0.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
    _rb_c4_text_0.startAngle=0;
    _rb_c4_text_0.endAngle=Math.PI*2;

        _c4_rectangle_0.addBehavior(_sb_c4_text_0);
        _c4_rectangle_0.addBehavior(_rb_c4_text_0);

    // when scale Behavior finishes, start rotation Behavior.
    _sb_c4_text_0.addListener( {
        behaviorExpired : function(behavior, time, actor) {
            _rb_c4_text_0.setFrameTime( time, 3000 );
    }});

    // when rotation Behavior finishes, start scale Behavior.
    _rb_c4_text_0.addListener( {
        behaviorExpired : function(behavior, time, actor) {
            _sb_c4_text_0.setFrameTime( time, 3000 );
    }});


    director_4.addScene(scene_4);
    director_4.loop(30);
</script>    
</pre>
</div>

<div><canvas id="_c4"></canvas></div>
<script>
    var director_4 = new CAAT.Director().initialize(
            160,160,document.getElementById('_c4'));
    var scene_4=     new CAAT.Scene().create();

    var _c4_rectangle_0= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation(50,50).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');
	scene_4.addChild(_c4_rectangle_0);

    var _sb_c4_text_0= new CAAT.ScaleBehavior();
    _sb_c4_text_0.setPingPong();
    _sb_c4_text_0.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
    _sb_c4_text_0.startScaleX= 1;
    _sb_c4_text_0.endScaleX= 2;
    _sb_c4_text_0.startScaleY= 1;
    _sb_c4_text_0.endScaleY= 2;
    // scale Behavior enabled by default. Start at time=2000ms, and
    // last for 3000ms.
    _sb_c4_text_0.setFrameTime(2000,3000);

    // unless otherwise stated, Behaviors are expired by default,
    // so this actor won't rotate until instrumented to do so.
    var _rb_c4_text_0= new CAAT.RotateBehavior();
    _rb_c4_text_0.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
    _rb_c4_text_0.startAngle=0;
    _rb_c4_text_0.endAngle=Math.PI*2;

        _c4_rectangle_0.addBehavior(_sb_c4_text_0);
        _c4_rectangle_0.addBehavior(_rb_c4_text_0);

    // when scale Behavior finishes, start rotation Behavior.
    _sb_c4_text_0.addListener( {
        behaviorExpired : function(behavior, time, actor) {
            _rb_c4_text_0.setFrameTime( time, 3000 );
    }});

    // when rotation Behavior finishes, start scale Behavior.
    _rb_c4_text_0.addListener( {
        behaviorExpired : function(behavior, time, actor) {
            _sb_c4_text_0.setFrameTime( time, 3000 );
    }});
    

    director_4.addScene(scene_4);
    director_4.loop(30);
</script>
</div>

<div class="section">
<h2>Containers</h2>
<p>
An CAAT.Actor can have any number of CAAT.Behaviors enabled at once. There are no constraints about their type, duration
and property application so the developer must take care of overlapping CAAT.Behaviors.
</p>
<p>
There's also the possibility of grouping CAAT.Behaviors together as is they were just a single CAAT.Behavior. This
can be accomplished by using a CAAT.BehaviorContainer. The main features of this element are as follows:
</p>
<ol>
    <li>A CAAT.ContainerBehavior can contain many other CAAT.Behavior instances, including other CAAT.ContainerBehaviors</li>
    <li>The CAAT.ContainerBehavior relates its contained children time to zero.</li>
    <li>Any contained CAAT.Behavior can not last beyond the container time duration.</li>
</ol>
<p>In the following example, we're going to set up a simple container behaviour:</p>

<div class="code">
<pre class="brush: js; auto-links: false; toolbar: false;">
<script>
    var director_5 = new CAAT.Director().initialize(
            150,150,document.getElementById('_c5'));
    var scene_5=     new CAAT.Scene().create();

    var shape_5= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation( 50,50 ).
            setSize(50,50).
            setFillStyle('#ffff00').
            setStrokeStyle('#000000')
    scene_5.addChild(shape_5);

    // set a Container for behaviors up.
    var _cb_c5= new CAAT.ContainerBehavior();
    _cb_c5.setCycle(true);
    // take 3 seconds to perform contained behaviors. If any
    // takes more than such time, it will be truncated.
    _cb_c5.setFrameTime(0,3000);

        // setup an Scaling behavior. Min scale 1, Max scale 2
    // (twice in size)
        var _sb_c5= new CAAT.ScaleBehavior();
        _sb_c5.setPingPong();
        _sb_c5.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
        _sb_c5.startScaleX= 1;
        _sb_c5.endScaleX= 2;
        _sb_c5.startScaleY= 1;
        _sb_c5.endScaleY= 2;
        // takes 2 seconds to scale. time measured from parent's
        // zero time.
        _sb_c5.setFrameTime(0,2000);

        // setup a Rotating behavior. 0-2PI, ie 360 degrees.
        var _rb_c5= new CAAT.RotateBehavior();
        _rb_c5.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
        _rb_c5.startAngle=0;
        _rb_c5.endAngle=Math.PI;
        // takes 1 second, starting half a second after parent's
        // time.
        _rb_c5.setFrameTime(500,1000);

        // add scale and rotation to the rectangle.
        _cb_c5.addBehavior(_sb_c5);
        _cb_c5.addBehavior(_rb_c5);

    // add path and conpound behavior of rotation and scale to
    // the rectanble shape.
    shape_5.addBehavior(_cb_c5);

    director_5.addScene(scene_5);
    director_5.loop(30);
</script>
</pre>
</div>



<div><canvas id='_c5'></canvas></div>
<script>
    var director_5 = new CAAT.Director().initialize(
            150,150,document.getElementById('_c5'));
    var scene_5=     new CAAT.Scene().create();

    var shape_5= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation( 50,50 ).
            setSize(50,50).
            setFillStyle('#ffff00').
            setStrokeStyle('#000000')
    scene_5.addChild(shape_5);

    // set a Container for behaviors up.
    var _cb_c5= new CAAT.ContainerBehavior();
    _cb_c5.setCycle(true);
    // take 3 seconds to perform contained behaviors. If any
    // takes more than such time, it will be truncated.
    _cb_c5.setFrameTime(0,3000);

        // setup an Scaling behavior. Min scale 1, Max scale 2
    // (twice in size)
        var _sb_c5= new CAAT.ScaleBehavior();
        _sb_c5.setPingPong();
        _sb_c5.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
        _sb_c5.startScaleX= 1;
        _sb_c5.endScaleX= 2;
        _sb_c5.startScaleY= 1;
        _sb_c5.endScaleY= 2;
        // takes 2 seconds to scale. time measured from parent's
        // zero time.
        _sb_c5.setFrameTime(0,2000);

        // setup a Rotating behavior. 0-2PI, ie 360 degrees.
        var _rb_c5= new CAAT.RotateBehavior();
        _rb_c5.anchor= CAAT.Actor.prototype.ANCHOR_CENTER;
        _rb_c5.startAngle=0;
        _rb_c5.endAngle=Math.PI;
        // takes 1 second, starting half a second after parent's
        // time.
        _rb_c5.setFrameTime(500,1000);

        // add scale and rotation to the rectangle.
        _cb_c5.addBehavior(_sb_c5);
        _cb_c5.addBehavior(_rb_c5);

    // add path and conpound behavior of rotation and scale to
    // the rectanble shape.
    shape_5.addBehavior(_cb_c5);

    director_5.addScene(scene_5);
    director_5.loop(30);
</script>
<p>
Some facts must be noticed:
<ol>
    <li>The time of the contained behaviors is counted from zero time. The zero time will be treated from the starting of the behavior time.</li>
    <li>In this example, the behavior has a lifecycle longer than the container behaviors. Nothing happends, except that during the extra time, no behavior is being applied.</li>
    <li>Analogously, the first behavior starts half a second after the container start, so there's a 500ms. pause before applying any behavior.</li>
    <li>A container can contain any number of CAAT.Behavior as well as other CAAT.ContainerBehavior</li>
</ol>
</div>


<div class="section">
<h2>Out-of-the-box Behaviours</h2>
<h3>Common properties</h3>
<p>
    Every CAAT.Behavior has the following common properties:</p>
<h4>Frame time</h4>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            behavior.setFrameTime( start_time, duration );
        </pre>
    </div>

    <p>Frame time are the temporal properties which determine whether the Behavior must be applied, time has not yet
    reached the time to start applying, or is expired. Frame time is defined by two values: start_time and duration.</p>
    <p>Upon behavior expiration, and only the first time it happens, The expiration listeners will be notified.</p>
<h4>Expiration notification</h4>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            behavior.addListener(notificationCallback);
        </pre>
    </div>
    <p>We can set as much behavior listeners as needed. Upon expiration, all of them will be sequentially notified.
    Listeners must be elements with a method of the form</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            behaviorExpired(behavior, time, actor);
        </pre>
    </div>
    <p>One valid default Behavior expiration listener could be of the form:</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            behavior.addListener( { behaviorExpired : function(behavior, time, actor) {
                _sb_c4_text_0.setFrameTime( time, 3000 );
            }});
        </pre>
    </div>
    <p>like in the previous example, but any object with such a method will do.</p>
    <p>The parameters passed to the callback are as follows:</p>
    <ol>
        <li>The CAAT.Behavior that has just expired.</li>
        <li>The CAAT.Scene time the behavior expired at.</li>
        <li>The CAAT.Actor the behavior was being applied to.</li>
    </ol>
<h4>Behavior Cycling</h4>
    <p>The behavior is a one-shot action which ends after the stablished duration behaviour ends. We can set
    a cycling behavior up though by calling the method</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            setCycle(boolean);
        </pre>
    </div>
    <p>
    with a true value. This makes the behavior to repeat continuously until after the CAAT.Scene is removed
    from the director, or until setCycle(false) is set.
    </p>
    
<h4>Interpolators</h4>
    <p>Behaviour are linearly applied by default, that is, the same behavior increment is set after the same time lapse
    has passed. In example, if we set an alpha behavior to go from 0 to 1 in a second, after 250 ms. time lapse we will
    have a 0.25 alpha value and after 500 ms. time lapse, we'll get .5 as alpha value. The method</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            setInterpolator(interpolator);
        </pre>
    </div>
        can change the default
    linear function for many more other functions i.e. accelerating, bouncing, etc.
    More on Interpolators in the interpolators chapter.

<h3>AlphaBehavior</h3>
<p>This Behaviour sets the alpha transparency value.</p>
<h4>startAlpha</h4>
    <p>Starting Alpha value to be set on Behaviour appliance.</p>
<h4>endAlpha</h4>
    <p>Ending Alpha value to be set on Behaviour expiration.</p>

<h3>RotateBehavior</h3>
    <p>This behaviour sets rotation angle around a predefined anchor point.</p>
<h4>startAngle</h4>
    <p>Starting rotation angle to be set on Behavior appliance.</p>
<h4>endAngle</h4>
    <p>Ending rotation angle to be set on Behavior expiration.</p>
<h4>anchor</h4>
    <p>Any of the following values from CAAT.Actor.prototype:</p>
    <ul>
        <li>ANCHOR_CENTER
		<li>ANCHOR_TOP
		<li>ANCHOR_BOTTOM
		<li>ANCHOR_LEFT
		<li>ANCHOR_RIGHT
		<li>ANCHOR_TOP_LEFT
		<li>ANCHOR_TOP_RIGHT
		<li>ANCHOR_BOTTOM_LEFT
		<li>ANCHOR_BOTTOM_RIGHT
    </ul>

<h3>ScaleBehavior</h3>
    <p>This behavior manages scale in both axes x and y at the same time. Scale means resizing.</p>
<h4>startScaleX</h4>
    <p>Starting X axis scaling factor to be set on Behavior appliance.</p>
<h4>startScaleY</h4>
    <p>Starting Y axis scaling factor to be set on Behavior appliance.</p>
<h4>endScaleX</h4>
    <p>Ending X axis scaling factor to be set on Behaviour expiration.</p>
<h4>endScaleY</h4>
    <p>Ending Y axis scaling factor to be set on Behaviour expiration.</p>
<h4>anchor</h4>
    <p>Any of the following values from CAAT.Actor.prototype:</p>
    <ul>
        <li>ANCHOR_CENTER
        <li>ANCHOR_TOP
        <li>ANCHOR_BOTTOM
        <li>ANCHOR_LEFT
        <li>ANCHOR_RIGHT
        <li>ANCHOR_TOP_LEFT
        <li>ANCHOR_TOP_RIGHT
        <li>ANCHOR_BOTTOM_LEFT
        <li>ANCHOR_BOTTOM_RIGHT
    </ul>

<h3>PathBehavior</h3>
    <p>This behavior manages translation across a predefined CAAT.Path. As an introduction, CAAT.PATH is composed
    of different path segments, either straight lines or curves.</p>
    <p>There's one very important fact about paths, and is that the position on the path will always be the center of
    the scene actor, and not any other coord.</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            setPath( path );
        </pre>
    </div>

    <p>Sets the path to traverse the CAAT.Actor across. The path must be an instance of CAAT.Path or an object of callback function
    that implements a method of the form:
    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            getPosition( time );
        </pre>
    </div>

</div>

<div>
<h4>autoRotate</h4>
    <p>Setting this flag to true, means that the actor the behavior is applied to will be rotating accordingly
    to the slope of the path at any given time.</p>
    <p>The following example will create two square shapes, a yellow one, which sets autorotate to true, and a green one
    which does not set the property. Both squares will traverse a circular path composed of two cubic bezier curves.
    Do not pay attention to the setInterpolator method, we'll see interpolators in detail in following chapters.</p>
<h4>translation</h4>
    <p>The translation parameters <strong>translateX</strong> and <strong>translate</strong> allow for
    a finer grain control of the path traverse. By default, the path will be applied so that the (0,0) position
    of the actor (that is, the top left corner) will be positioned on path. With these parameters, what point of
    the Actor will be on path can be controlled.</p>
    <p>
    Look at the following example and see the difference of setting translateX to actor.width/2 and translateY to
    actor.height/2 for the green actor while not setting any value for the other.
    </p>
<div class="code">
    <pre class="brush: js; auto-links: false; toolbar: false;">
        <script>
            var director_6 = new CAAT.Director().initialize(
                    250,250,document.getElementById('_c6'));
            var scene_6=     new CAAT.Scene().create();

            var shape_c6_0= new CAAT.ShapeActor().create().
                    setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
                    setLocation( 50,50 ).
                    setSize(50,50).
                    setFillStyle('#ffff00').
                    setStrokeStyle('#0000ff').
                    setAlpha(.75);
            var shape_c6_1= new CAAT.ShapeActor().create().
                    setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
                    setLocation( 50,50 ).
                    setSize(50,50).
                    setFillStyle('#00ff00').
                    setStrokeStyle('#ff00ff').
                    setAlpha(.75);

            // add two rectangle shapes to the scene.
            scene_6.addChild(shape_c6_0);
            scene_6.addChild(shape_c6_1);

            // create a circular path.
            var _path_c6= new CAAT.Path();
            _path_c6.beginPath(25,125);
            _path_c6.addCubicTo( 25,25,   225,25,   225,125 );
            _path_c6.addCubicTo( 225,225,  25,225,  25,125 );
            _path_c6.endPath();

            // add an actor to show the path.
            var _pathactor_c6= new CAAT.PathActor().create();
            _pathactor_c6.setPath(_path_c6);
            _pathactor_c6.setBounds(0,0,director_6.width,director_6.height);
            scene_6.addChild( _pathactor_c6 );

            // setup up a path traverser for the path.
            var _pathbehavior_c6_0= new CAAT.PathBehavior();
            _pathbehavior_c6_0.setPath( _path_c6 );
            _pathbehavior_c6_0.setFrameTime(0,5000);
            _pathbehavior_c6_0.setCycle(true);
            _pathbehavior_c6_0.autoRotate= true;

                // set path traverse by the center of the rectangle shape.
                _pathbehavior_c6_0.translateX= shape_c6_0.width/2;
                _pathbehavior_c6_0.translateY= shape_c6_0.height/2;

            // setup up an inverse path traverser for the path.
            // ie, traverse from final path position to start position.
            var _pathbehavior_c6_1= new CAAT.PathBehavior();
            _pathbehavior_c6_1.setPath( _path_c6 );
            _pathbehavior_c6_1.setFrameTime(0,5000);
            _pathbehavior_c6_1.setCycle(true);
            _pathbehavior_c6_1.setInterpolator(
                    new CAAT.Interpolator().createLinearInterpolator(
                            false,  // no pingpong.
                            true    // traverse the path inversely, from end to beginning.
                            ) );

            shape_c6_0.addBehavior( _pathbehavior_c6_0 );
            shape_c6_1.addBehavior( _pathbehavior_c6_1 );

            director_6.addScene(scene_6);
            director_6.loop(30);
        </script>
    </pre>
</div>

<div><canvas id="_c6"></canvas></div>
<script>
    var director_6 = new CAAT.Director().initialize(
            250,250,document.getElementById('_c6'));
    var scene_6=     new CAAT.Scene().create();

    var shape_c6_0= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation( 50,50 ).
            setSize(50,50).
            setFillStyle('#ffff00').
            setStrokeStyle('#0000ff').
            setAlpha(.75);
    var shape_c6_1= new CAAT.ShapeActor().create().
            setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
            setLocation( 50,50 ).
            setSize(50,50).
            setFillStyle('#00ff00').
            setStrokeStyle('#ff00ff').
            setAlpha(.75);

    // add two rectangle shapes to the scene.
    scene_6.addChild(shape_c6_0);
    scene_6.addChild(shape_c6_1);

    // create a circular path.
    var _path_c6= new CAAT.Path();
    _path_c6.beginPath(25,125);
    _path_c6.addCubicTo( 25,25,   225,25,   225,125 );
    _path_c6.addCubicTo( 225,225,  25,225,  25,125 );
    _path_c6.endPath();

    var _pathactor_c6= new CAAT.PathActor().create();
    _pathactor_c6.setPath(_path_c6);
    _pathactor_c6.setBounds(0,0,director_6.width,director_6.height);
    scene_6.addChild( _pathactor_c6 );

    // setup up a path traverser for the path.
    var _pathbehavior_c6_0= new CAAT.PathBehavior();
    _pathbehavior_c6_0.setPath( _path_c6 );
    _pathbehavior_c6_0.setFrameTime(0,5000);
    _pathbehavior_c6_0.setCycle(true);
    _pathbehavior_c6_0.autoRotate= true;
    _pathbehavior_c6_0.translateX= shape_c6_0.width/2;
    _pathbehavior_c6_0.translateY= shape_c6_0.height/2;

    // setup up an inverse path traverser for the path.
    // ie, traverse from final path position to start position.
    var _pathbehavior_c6_1= new CAAT.PathBehavior();
    _pathbehavior_c6_1.setPath( _path_c6 );
    _pathbehavior_c6_1.setFrameTime(0,5000);
    _pathbehavior_c6_1.setCycle(true);
    _pathbehavior_c6_1.setInterpolator(
            new CAAT.Interpolator().createLinearInterpolator(
                    false,true) );

    shape_c6_0.addBehavior( _pathbehavior_c6_0 );
    shape_c6_1.addBehavior( _pathbehavior_c6_1 );

    director_6.addScene(scene_6);
    director_6.loop(30);
</script>
</div>

</body>
</html>